<template>
      <div id="content" ref="box">{{count }}</div>
      <div><button @click="count++">+</button></div>
      <button @click="changeColor">变色</button>
</template>
<!-- 
   vue3组合式API中访问DOM元素的步骤
   1、定义一个ref变量:let box=ref<HTMLDivElement>()
   2、在template模板中通过ref引入:<div ref="box">{{count }}</div>
   3、操作DOM元素：
   const changeColor=()=>{
      (<HTMLDivElement>box.value).style.color="springgreen"
   }
 -->
<script lang='ts' setup>
   import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
   let box=ref<HTMLDivElement>()
   let count=ref<number>(0)
   const changeColor=()=>{
      (<HTMLDivElement>box.value).style.color="springgreen"
   }
   onBeforeMount(()=>{
      console.log('--------1、onBeforeMount----------');
      console.log(document.querySelector("#content"));
   })
   onMounted(()=>{
      console.log('--------2、onMounted----------');
      console.log(document.querySelector("#content"));
      (<HTMLDivElement>document.querySelector("#content")).style.color="red"
   })
   onBeforeUpdate(()=>{
      console.log('--------3、onBeforeUpdate----------');
      console.log('countdata',count.value);
      console.log('countHTML',document.getElementById('content')?.innerHTML);
      
   })
   onUpdated(()=>{
      console.log('--------4、onUpdated----------');
      console.log('countdata',count.value);
      console.log('countHTML',document.getElementById('content')?.innerHTML);
   })
   onBeforeUnmount(()=>{
      console.log('--------5、onBeforeUnmount----------');
   })
   onUnmounted(()=>{
      console.log('--------6、onUnmounted----------');
   })

   
</script>

<style lang='scss' scoped>
</style>